import React, { Component } from 'react';
import { 
  List,
  Card,
  Modal,
  Avatar,
  message
} from "antd";
import WrapperProjectForm from './ProjectForm'
import http from '../../axios'
import { appendArrayKeys } from "../../utils";
import '../../style/common.less'
import './Project.less';

const ListItem = List.Item;
const ListItemMeta = List.Item.Meta;

class Project extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      editData: null,
      loading: false
    }
  }

  newProject = () => {
    this.setState({
      modalVisible: true
    })
  }
  handleCancel = () => {
    this.setState({
      modalVisible: false
    })
  }
  handleOk = (values, cb) => {
    if (values && typeof values.id !== 'number') {
      http.project.newList({...values}).then((r) => {
        cb && cb();
        this.setState({
          modalVisible: false
        })
        this.getProjectList();
      })
    } else {
      http.project.editList({...values}).then((r) => {
        cb && cb();
        this.setState({
          modalVisible: false
        })
        this.getProjectList();
      })
    }
  }
  getProjectList = () => {
    this.setState({
      loading: true
    })
    http.project.getList().then((r) => {
      const data = appendArrayKeys(r);
      this.setState({
        data
      })
    }).then(() => {
      this.setState({
        loading: false
      })
    })
  }
  editProject = (item) => {
    this.setState({
      editData: item,
      modalVisible: true
    })
    
  }
  deleteProject = (id) => {
    Modal.confirm({
      title: '确认删除？',
      onOk: () => {
        http.project.deleteList({id}).then((r) => {
          message.success('删除成功');
          this.getProjectList();
        })
      },
      okText: '确认',
      cancelText: '取消'
    })
    
  }

  componentDidMount() {
    this.getProjectList()
  }

  render() {
    const { modalVisible, editData, loading, data } = this.state;
    return (
      <div className={loading ? 'loading container' : 'container'}>
        <Card title="全部项目" className="card">
          <List
            loading={loading}
            dataSource={data}
            renderItem={
              item => (
                <ListItem 
                  className={item.status === 0 ? 'doing' : item.status === 1 ? 'master' : 'finish'} 
                  actions={[<a onClick={() => this.editProject(item)}>编辑</a>, <a onClick={() => this.deleteProject(item.id)}>删除</a>]}
                >
                  <ListItemMeta
                    avatar={<Avatar src={item.img} />}
                    title={<a target="_blank" href={item.link}>{item.title}</a>}
                    description={item.content}
                  />
                </ListItem>
              )
            }
          />
          <a href="javascript:" onClick={this.newProject} className="new-btn">+</a>
        </Card>
        <Modal
          title="我的项目"
          visible={modalVisible}
          onCancel={this.handleCancel}
          footer={null}
          destroyOnClose={true}
        >
          <WrapperProjectForm
            editData={editData}
            handleOk={this.handleOk}
          />
        </Modal>
      </div>
    )
  }
}

export default Project;